<template>
  <div class="div" style="border-radius: 10px;">


    <div style="height: 50px">
      <span class="span1 big_title_style">会员数据分析</span>
    </div>

    <div>
      <el-row>
        <el-col :span="12">
          <div id="member_pie_chart_map"></div>
        </el-col>
        <el-col :span="12">
          <div id="member_histogram_map"></div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
  import echarts from "echarts";
  import {
    getMemberData,
    getMemberBehaviorData,
    getMemberTotalMap
  } from '@/api/dataCentre/customerCount.js'

  export default {
//import 引入的组件需要注入到对象中才能使用
    components:{},
    props:{},
    data(){
//这里存数据
      return{
        MemberData:[],
        MemberBehaviorData:[],
        ProductAxisMap:[]
      };
    },
//计算属性
    computed: {

    },
//监控data中数据变化
    watch: {

    },
//方法
    methods: {
      fansPieChart() {
        getMemberData(this.queryParams).then((response) => {
          this.memberData = response.data

          getMemberBehaviorData(this.queryParams).then((response) => {
            this.MemberBehaviorData = response.data

            let this_ = this;
            let myChart = echarts.init(document.getElementById("member_pie_chart_map"));
            let option = {
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
              },
              legend: {
                data: ['访问会员','收藏会员', '加购会员', '成交会员',]
              },
              series: [
                {
                  name: '会员统计',
                  type: 'pie',
                  selectedMode: 'single',
                  radius: [0, '30%'],
                  label: {
                    position: 'inner',
                    fontSize: 14,
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    {value: this.memberData.memberStoredNumber, name: '储值会员'},
                    {value: this.memberData.memberUpgradeNumber, name: '升级会员'},
                    {value: this.memberData.membershipNewlyNumber, name: '新增会员', selected: true}
                  ],
                  color: ["#00BFFF","#585eaa","#a3cf62"]
                },
                {
                  name: '会员统计',
                  type: 'pie',
                  radius: ['45%', '60%'],
                  labelLine: {
                    length: 30,
                  },
                  label: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#F6F8FC',
                    borderColor: '#8C8D8E',
                    borderWidth: 1,
                    borderRadius: 4,

                    rich: {
                      a: {
                        color: '#6E7079',
                        lineHeight: 22,
                        align: 'center'
                      },
                      hr: {
                        borderColor: '#8C8D8E',
                        width: '100%',
                        borderWidth: 1,
                        height: 0
                      },
                      b: {
                        color: '#4C5058',
                        fontSize: 14,
                        fontWeight: 'bold',
                        lineHeight: 33
                      },
                      per: {
                        color: '#fff',
                        backgroundColor: '#4C5058',
                        padding: [3, 4],
                        borderRadius: 4
                      }
                    }
                  },
                  data: [
                    {value: this.MemberBehaviorData.membershipVisitNumber, name: '访问会员'},
                    {value: this.MemberBehaviorData.membershipCollectNumber==null?0:this.MemberBehaviorData.membershipCollectNumber, name: '收藏会员'},
                    {value: this.MemberBehaviorData.memberShoppingNumber, name: '加购会员'},
                    {value: this.MemberBehaviorData.memberMakeNumber, name: '成交会员'},
                  ],
                  color: ["#fcaf17","#585eaa","#f36c21","#d64f44"]

                },

              ]
            }
            myChart.setOption(option);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener("resize", function () {
              myChart.resize();
            });
          })
        })


      },

      fansHistogram(){

        getMemberTotalMap(this.queryParams).then((response) => {
          this.ProductAxisMap = response.data


        let this_ = this;
        let myChart = echarts.init(document.getElementById("member_histogram_map"));
        let option = {
          title: {
            text: '近一月分析'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend:this.ProductAxisMap.legend
          ,
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.ProductAxisMap.xaxis.data
          },
          yAxis: {
            type: 'value'
          },
          series: this.ProductAxisMap.series
        }
        myChart.setOption(option);
        //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
        window.addEventListener("resize", function () {
          myChart.resize();
        });

        })
      }

    },
//声明周期 - 创建完成（可以访问当前this实例）
    created() {

    },
//生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.fansPieChart()

      this.fansHistogram()
    },
    beforeCreate() {},//生命周期 - 创建之前
    beforeMount() {},//生命周期 - 挂载之前
    beforeUpdate() {},//声明周期 - 更新之前
    updated() {},//生命周期 - 更新之后
    beforeDestroy() {},//生命周期 - 销毁之前
    destroyed() {},//生命周期 - 销毁之后
    activated() {},//缓存keep-alive
  }
</script>

<style scoped>

  #member_pie_chart_map {
    width: 100%;
    height: 500px;

  }
  #member_histogram_map {
    width: 100%;
    height: 500px;

  }


  .div {
    background: #fff;
    margin: 20px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  }

</style>
